<template>
  <div class="image-panel-wrapper">
      <div class="image-panel-box">
          <div class="image-panel__pagination">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-size="pageSize"
                layout="total, prev, pager, next, sizes"
                :page-sizes="[10, 20, 30, 50]"
                :total="total">
            </el-pagination>
          </div>
          <div class="image-panel__body">
              <div
                v-for="(item) in list"
                :key="item.uid"
                class="image-panel-item"
              >
                <i class="el-icon-close material-delete" @click="deleteMaterial(item)" />
                <img
                    src="@/assets/image/music.jpeg"
                    :class="`material-audio-img ${audioKey === item.uid && audioPlay ? 'audio-play' : ''}`" />
                <div class="material-name">{{item.name}}</div>
                <div class="mask" />
                <i :class="`el-icon-video-play audio-play-btn ${!audioPlay || audioKey !== item.uid? 'show' : ''}`" @click="playAudio(item)"></i>
                <i :class="`el-icon-video-pause audio-play-pause ${audioPlay && audioKey === item.uid ? 'show' : ''}`" @click="pauseAudio(item)"></i>
              </div>
          </div>
      </div>
      <audio :src="audioSrc" v-if="audioSrc !== ''" ref="audio" ></audio>
  </div>
</template>

<script>
import axios from 'axios';
export default {
    props: ['keyword'],
    data() {
        return {
            list: [],
            total: 0,
            pageSize: 20,
            currentPage: 1,
            audioPlay: false,
            audioSrc: '',
            audioKey: '',
        };
    },
    created() {
        this.getMaterial();
    },
    methods: {
        pauseAudio(audio) {
            if (this.$refs.audio) {
                this.$refs.audio.pause();
                this.audioPlay = false;
            }
        },
        playAudio(audio) {
            console.log('audio play==>', audio);
            this.audioSrc = audio.uri;
            this.audioKey = audio.uid;
            this.audioPlay = true;
            this.$nextTick(() => {
                this.$refs.audio.play();
            });
        },
        deleteMaterial(material) {
            let message = material.templates.length > 0 ? `当前有${material.templates.length}模板使用该素材!` : '';
            this.$confirm(`${message}此操作将永久删除该文件, 是否继续?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                axios({
                    method: 'post',
                    data: {
                        uid: material.uid,
                    },
                    url: '/api/material/delete'
                }).then((res) => {
                    const { code, msg } = res.data;
                    if (Number(code) === 0) {
                        const materialIndex = this.list.findIndex(vo => vo.uid === material.uid);
                        if (materialIndex >= 0) {
                            this.list.splice(materialIndex, 1);
                        }
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    } else {
                        this.$message.error(msg);
                    }
                });
                
            });
        },
        getMaterial() {
            const { keyword = '', pageSize, currentPage } = this;
            axios({
                url: '/api/material/list',
                method: 'get',
                params: {
                    flag: keyword,
                    pageSize,
                    page: currentPage,
                    meta: 'audio',
                },
            }).then(res => {
                const { code, data } = res.data;
                if (Number(code) === 0) {
                    const { docs, page, totalDocs, limit } = data;
                    this.list = docs;
                    this.currentPage = page;
                    this.total = totalDocs;
                    this.pageSize = limit;
                } else {
                    this.$message.error('加载数据失败');
                }
            });
        },
        handleSizeChange(pageSize) {
            this.pageSize = pageSize;
            this.getMaterial();
        },
        handleCurrentChange(currentPage) {
            this.currentPage = currentPage;
            this.getMaterial();
        }
    }
}
</script>

<style lang="less" scoped>
@keyframes audioPlayAnimation {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}
.image-panel-wrapper {
    .image-panel-box {
        .image-panel__pagination {
            text-align: right;
        }
        .image-panel__body {
            margin: 20px auto; // 剧中
            // columns: 4; // 默认列数
            // column-gap: 30px; // 列间距
            .image-panel-item {
                width: 160px;
                height: 160px;
                margin: 10px;
                display: inline-block;
                .mask {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    content: ' ';
                    z-index: 10;
                    background: rgba(125, 125, 125, 0.5);
                    left: 0;
                    top: 0;
                    display: none;
                }
                &:hover .mask, &:hover .audio-play-btn.show, &:hover .audio-play-pause.show{
                    display: inline-block;
                }
                // break-inside: avoid;
                // margin-bottom: 30px;
                position: relative;
                .audio-play-btn, .audio-play-pause {
                    position: absolute;
                    z-index: 100;
                    cursor: pointer;
                    left: 0;
                    top: 0;
                    bottom: 0;
                    right: 0;
                    margin: auto;
                    font-size: 32px;
                    width: 32px;
                    height: 32px;
                    margin: auto;
                    display: none;
                    color: #FFF;
                }
                .material-audio-img {
                    width: 100px;
                    height: 100px;
                    display: inline-block;
                    border-radius: 100%;
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    margin: auto;
                    &.audio-play {
                        animation: audioPlayAnimation 5s linear infinite normal forwards;
                    }
                }
                .material-name{
                    text-align: center;
                    position: absolute;
                    bottom: 0;
                    width: 100%;
                    font-size: 12px;
                }
                .material-delete {
                    position: absolute;
                    right: 0;
                    top: 0;
                    z-index: 100;
                    display: none;
                }
                &:hover .material-delete {
                    display: inline-block;
                }
                .material-play {
                    position: absolute;
                    left: 0;
                    top: 0;
                    bottom: 0;
                    right: 0;
                    margin: auto;
                    font-size: 100px;
                    display: inline-block;
                    width: 100px;
                    height: 100px;
                    color: #777;
                }
                img {
                    width: 100%;
                }
                .material-flag-box {
                    text-align: right;
                    overflow: hidden;
                    position: absolute;
                    bottom: 0;
                    .material-tag-item {
                        margin: 0 4px;
                        border-radius: 0;
                        &:first-of-type {
                            margin-right: 0;
                        }
                    }
                }
            }
        }
    }
}
</style>